鐵人賽 Day27自己做一個價值幾十萬的動態網站

第二十七課：最後篇章也是最後TypeScript與後台介面架設介紹

再進入後台介面製作與講解前，我們可以先來了解TypeScript與Tailwindcss也是為了未來的協同合作先有個概念

TypeScript介紹

TypeScript與javaScript同為一種程式語言，且許多公司在招募前端工程師會要求需要使用TS等技能，就如同學習後端會碰到Java等，學習unity會碰到C#等等，學習TS能加強業界所需要的前端技能。
完成這裡好了


程式語言的分類分為動態語言dynamically-typed與靜態語言statically-typed
靜態語言statically-typed 為下列所舉例
C#, C++, Java ,Typescript

int a =0;
:x: a="string"; 強烈要求宣告Type樣式的不能動的

動態語言dynamically-typed
python, javascript, Rudy

let a =0;
:o: a="string"; 可變動
可變動導致更多自由卻引來更多的Bug 如：math.min(a) 當a從數字改變成字元 將使函數無法進行數學運算而出現問題，須等到run app 才會知道

所以可以看得出來當一個App的功能越擴越大之時，他需要的是靜態語言的穩定性，來避免可能會產生的未來bug，如今天如果要求傳送的訂單狀態宣告是數字，而後面改變成字串產生的錯誤，可能會讓整個App crash。所以知道學習動機後，下面可以來針對各自的優缺點做比較。

TypeScript與JavaScript優缺點比較

所以學習Ts的好處，在團隊合作上是利大於弊的，再來我們要來介紹Tailwindcss

Tailwindcss介紹

tailwindcss的官方連結，所以雖然說tailwind css簡潔又暴力，但可以看得出來再排版上div的可讀性變的不好，如不熟悉此專案的外人在面對很長的styling coding會不知道要改要如何下手，因沒有人為的命名，加上各個都是縮寫與客製化的設定，技術債會讓維護的人需要一段時間適應，但好處是當熟悉後，在修改tailwind config之時，可以很簡潔的一次大量去修改與styling。
如何設置tailwind官方解說，值得一提的是使用tailwind之前可以先設置tailwind的config，config設置中你可以設定RWD的參數，還有常見的主色調設置等等重複性高的，而最下面帶到我們實作的後台管理，會來講解tailwind的config與Ts的config。

TypeScript實作，如何使用Ts來做Js Type-Check練習

npm i -g typescript 

npm i -g (install -globally )
不行記得要多打sudo 開權限sudo npm i -g typescript
而檢查Ts版本可以打

tsc -v

並想要實作Ts如何運作可以，創建空白folder或是之前提到的使用cmd 指令mkdir folder名 並在裡面創建index.ts。

並這邊可以練習tsc指令，嘗試把index.ts轉回index.js，
只要輸入你ts+想要轉檔的檔名就可以

tsc index.ts

並這邊出現紅色警告也不用緊張只是因為index.js與index.ts共用環境，所以變數相同的宣告了兩次而出現警告提示，這邊如分開環境就不用擔心，或是下面說講解如何直接創立Ts React App就不用擔心還要轉檔等等問題。
在創建Ts React App之前我們可以先來練習如何設置Ts config

Configuring Ts Compiler

Ts config就像Ts的控制面版，可以在上面管理type-checking的功能，有時候不想要Ts限制太多就可以關掉一些功能，關掉越多就越接近原本沒有限制Js，或是可以控制要輸出的Js版本，如Es2016等等的細節，都可以在Ts config裡面操作。要設置Ts config一樣打開terminal輸入

tsc --init

然後可以重點講解的是產生js的方式也可以在這邊有所操作，首先要先了解在config內的rootDir與outDir，root directory與out directory的縮寫，分別意思為輸出與輸入的目錄，也就是要轉檔前的Ts檔所存放的folder，與轉檔出來的Js檔所存放的folder

 "target": "es2016", 
 "rootDir": "./", 
 ----------省略線---------------
 "outDir": "./", 輸出的js file
 "outDir": "./dist", distributable縮寫 folder 
 "removeComments": true,    

指令 打tsc 就可以直接產生 js file，就算沒有創建dist他也會幫你創建

上述讓我們熟悉單獨使用Ts的用法後，我們也可以使用create-react-app指令，直接創建一個由Ts所構成的React App

Ts 如何架設Ts的React App專案

那如果想要直接創建一個React App並是以Ts去執行的專案時，我們可以直接使用到原生create-react-app的指令，創建Ts的版本
https://create-react-app.dev/docs/adding-typescript/

create-react-app my-app --template typescript

如果想把原來做好的React app js版轉成Ts，官方也給出了指令可以直接轉換。

如何使用這個去做轉換練習，在下面實作這邊採用了javaScript master大大的後台專案，並作為修改，如果對後台UI這邊附上製作的連結，剛好裡面也完整介紹了如何用Js與Tailwindcss去做各種功能，而這邊因為覺得javaScript master的忠實粉，所以參考了他的UI形式，將js的開發方式修改成Ts的版本，並加入一些自己的元素去致意，並在其中新增了我們需要的飯店管理、人員管理等頁面，但影片中的有些功能用不太到的將會拿掉，原片連結附在下方

https://www.youtube.com/watch?v=jx5hdo50a2M&t=12s
因是參考javaScript master大大的東西，UI介面上就不會多加解釋，整體設計風格、簡潔的coding等優秀的UI設計推薦大家去看原片，或是也可以使用自己的後台介面，在後面幾天也將會注重在如何把我們至今所做好的Api做串接，如何使用在不同的後台介面上為訂房網的訂房流程做管理。

後台介面樣式，整合上述認識Ts與Tailwindcss的開發專案

這邊採用了javaScript master大大的後台專案，並作為修改，如果對後台UI這邊附上製作的連結，剛好裡面也完整介紹了如何用Js與Tailwindcss去做各種功能，而這邊因為覺得javaScript master的忠實粉，所以參考了他的UI形式，將js的開發方式修改成Ts的版本，並加入一些自己的元素去致意，並在其中新增了我們需要的飯店管理、人員管理等頁面，連結附在下方，因是參考javaScript master大大的東西，UI介面上就不會多加解釋，整體設計風格，等優秀的UI設計推薦大家去看原片，或是也可以使用自己的後台介面，在後面幾天也將會注重在如何把我們至今所做好的Api套用在後台上來方便管理，拉回主題為訂房網的訂房流程做管理。

訂房網 後台展示Demo (未限制權限且能觀看現有資料庫資料)

結論

明天會開始製作後台介面的相關連接，並在頁面上除了表單的展現，如果製作時間上充足的話，前端的使用者動畫優化與後端連接上的函數爬梳都會盡量帶到，最後也希望這次的挑戰能從基礎到進階到最新的技術都能夠在這一次挑戰內都有涉及的。